<template>
  <view class="TaskLists">



    <template v-for="item in 4">
      <navigator url="/pages/fixform/fixform?name=完成维修"
        :class="{ 'opacity': taskobj.isover, 'default-opacity': !taskobj.isover }">
        <view class="taskList">
          <view class="top">

            <view class="left">
              <image :src="taskobj.imgUrl" mode="widthFix"></image>
            </view>
            <view class="right">
              <view class="text">
                <view class="fixproject">
                  <text class="fixtext">维修项目：{{taskobj.fixproject}}</text>
                </view>
                <view class="fixdescri ">
                  <text class="text">故障描述：{{taskobj.fixdescri}}</text>

                </view>
                <view class="tag">
                  <image v-if="taskobj.isover" src="@/static/已结束.png" mode="widthFix"></image>
                  <image v-else src="@/static/等待中.png" mode="widthFix"></image>
                </view>
              </view>

            </view>


          </view>
          <view class="bottom">
            <text>故障地址:{{taskobj.fixaddr}}</text>
          </view>

        </view>

      </navigator>
    </template>





  </view>
</template>

<script setup>
  const taskobj = reactive({
    imgUrl: "/static/tabBar/photoRed.png",
    fixproject: "但是项ffffff反倒是规范施工方式的国防生目",
    fixdescri: "描述发生的股份的事故发生的股份的事故发生国防生的鬼斧神工发生股份的事故发生发生股份时光飞逝什么",
    fixaddr: "在哪功夫大使馆发生股份时光飞逝大锅饭都是国防生的鬼斧神工富商大贾发生的功夫大使馆水电费割发代首鬼斧神工讽德诵功讽德诵功发的里",
    isover: true
  })
</script>


<style lang="scss">
  .opacity {
    opacity: 0.5;
  }

  .default-opacity {
    opacity: 1;
  }

  .TaskLists {

    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: $uni-bg-color-grey;

    .taskList {
      box-sizing: border-box;
      background-color: $uni-bg-color;

      // 统一文字大小
      text {
        font-size: 24rpx;
        color: $uni-text-color;
      }

      position: relative;
      width: 720rpx;
      height: 350rpx;
      padding: 10rpx 10rpx;
      margin-top: 40rpx;

      box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.5);
      border: 1rpx solid gray;
      border-radius: 20rpx;

      .top {
        width: 100%;
        overflow: hidden;

        display: flex;
        flex-direction: row;

        ;

        .left {
          box-sizing: border-box;
          // 防止文字挤压图片
          flex: 0 0 40%;
          /* 图片区域占据卡片宽度的40%，可以根据需要调整 */
          padding: 5rpx;
          display: inline;

          image {
            width: 100%;
            background-color: rgba(255, 255, 255, 0.8);
          }
        }

        .right {
          flex: 1;

          display: flex;
          flex-direction: column;
          justify-content: start;
          align-items: center;

          //这里有一个天大的坑，可以学习， 换行不用white-space: nowarp;，使用white-space: nowarp //有弊端，使得元素的宽度到达屏幕的最后，甚至击破父元素、

          .text {
            flex: 1;
            /* 让.text能填充剩余空间并允许内部内容溢出隐藏 */
            overflow: hidden;


            .fixproject {


              .fixtext {
                font-size: 30rpx;
                flex: 0 0 auto;
                /* 或者直接使用固定的宽度，取决于你的布局需求 */
                max-width: 100%;
                /* 限制文本块的最大宽度 */
                display: -webkit-box;
                -webkit-line-clamp: 1;
                /* 设置为需要的行数 */
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: normal;
                /* 允许正常换行，结合 -webkit-line-clamp 实现多行省略 */

              }
            }


            .fixdescri {
              padding-top: 40rpx;

              .text {
                flex: 0 0 auto;
                /* 或者直接使用固定的宽度，取决于你的布局需求 */
                max-width: 100%;
                /* 限制文本块的最大宽度 */
                display: -webkit-box;
                -webkit-line-clamp: 3;
                /* 设置为需要的行数 */
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: normal;
                /* 允许正常换行，结合 -webkit-line-clamp 实现多行省略 */
              }

            }


          }

          .tag {
            position: absolute;
            float: right;
            top: 100rpx; // 调整tag的位置到右上角，根据需要可调整数值
            right: 50rpx; // 距离右边距，可根据需要调整
            width: 120rpx; // 根据图标大小调整宽度
            height: 60rpx; // 根据图标大小调整高度
            opacity: 1;
            z-index: 66;

            image {
              width: 100%;
              height: auto;
            }

            ;
          }

        }

      }

      .bottom {
        width: 100%;
        padding: 0rpx 5rpx;
        margin-bottom: 10rpx;

        text {
          font-size: 24rpx;
          flex: 0 0 auto;
          /* 或者直接使用固定的宽度，取决于你的布局需求 */
          max-width: 100%;
          /* 限制文本块的最大宽度 */
          display: -webkit-box;
          -webkit-line-clamp: 2;
          /* 设置为需要的行数 */
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: normal;
          /* 允许正常换行，结合 -webkit-line-clamp 实现多行省略 */
        }




      }
    }
  }
</style>